import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Index from './qtRouter';
import Video from './qtRouter/video';
import Wrokplace from './qtRouter/workplace'
import './qtRouter/index.css'

function NestedAppRouter(){
    return(
        <Router>
            <div className="mainDiv">
                <div className="leftNav">
                    <h1>一级导航</h1>
                    <ul>
                        <li><Link to="/">博客首页</Link></li>
                        <li><Link to="/video">视频教程</Link></li>
                        <li><Link to="/wrokplace">职场教程</Link></li>
                    </ul>
                </div>
                <div className="rightMain">
                    <Route path="/" exact component={Index}/>
                    <Route path="/video" component={Video}/>
                    <Route path="/wrokplace" component={Wrokplace}/>
                </div>
            </div>
        </Router>
    )
}

export default NestedAppRouter;